<script setup lang="ts">
import LinkCard from "@/components/link/LinkCard.vue";
import {getCurrentInstance, onMounted, ref} from "vue";
import {linkApi} from "@/api/blog/linkApi.ts";
import SvgIcon from "@/components/common/SvgIcon.vue";
import LinkSimpleCard from "@/components/link/LinkSimpleCard.vue";
import BackToTop from "@/components/common/BackToTop.vue";
import MyInput from "@/components/common/MyInput.vue";
import Dialog from "@/components/common/Dialog.vue";
import {authApi} from "@/api/blog/authApi.ts";
const {
  proxy: { $Message }
} = getCurrentInstance() as any
const dialog = ref({
  visible: false,
  title: '友链申请表单'
})
const links = ref([] as FriendLinkVO[])
const commonLinks = ref([] as FriendLinkVO[])
const loseLinks = ref([] as FriendLinkVO[])
const isShowing = ref({
  commonLink: true,
  loseLink: false,
  disclaimer: true,
  friendship: false,
  applyLink: false
})
const applyLinkParam = ref({
  siteName: '',
  siteUrl: '',
  remark: '',
  logoUrl: '',
  email: '',
  code: ''
}  as FriendLinkParam)
onMounted(()=>{
  linkApi.getTopLink().then((res)=>{
    links.value = res.data
  })
  // status 0 为正常友链 1 为失效友链
  linkApi.getLinkPage(1,10,0).then((res)=>{
    commonLinks.value = res.data.records
  })
  linkApi.getLinkPage(1,10,1).then((res)=>{
    loseLinks.value = res.data.records
  })
})

const copyEmail = ()=>{
  // 这里是通过 navigator.clipboard.writeText() 实现的复制
  navigator.clipboard.writeText("mikubox@qq.com").then(()=>{
    $Message('邮箱已复制', 'success',true)
  })
}

const applyLink = () => {
  dialog.value.visible = true
}

const applyLinkBtn = () => {
  if(!applyLinkParam.value.siteName){
    $Message('请输入站点名称', 'warning',true)
    return
  }
  if(!applyLinkParam.value.siteUrl){
    $Message('请输入站点地址', 'warning',true)
    return
  }
  if(!applyLinkParam.value.logoUrl){
    $Message('请输入站点图标', 'warning',true)
    return
  }
  if(!applyLinkParam.value.email){
    $Message('请输入邮箱', 'warning',true)
    return
  }
  if(!applyLinkParam.value.code){
    $Message('请输入验证码', 'warning',true)
    return
  }
  linkApi.apply(applyLinkParam.value).then(res=>{
    if(res.code === 200){
      $Message('申请成功', 'success',true)
      dialog.value.visible = false
    }else {
      $Message(res.msg, 'error',true)
    }
  })
}

const sendMailCode = (email:string,type?:number) => {
  if(!email){
    $Message('请输入邮箱', 'warning',true)
    return
  }
  authApi.sendMailCode(email,type).then(res=>{
    if(res.code === 200){
      $Message('发送成功', 'success',true)
    }else {
      $Message(res.msg, 'error',true)
    }
  })
}
</script>

<template>
  <div class="link">
    <div class="link-card-list">
      <LinkCard v-for="link in links" :key="link.id" :site="link"/>
    </div>
    <div class="common-link-list">
      <div class="link-head">
        <h2>友情博客 🔥（{{ commonLinks.length }}）</h2>
        <div class="link-btn" @click="isShowing.commonLink=!isShowing.commonLink">
          {{ isShowing.commonLink ? '收起' : '展开' }}
          <SvgIcon :icon-class="isShowing.commonLink ? 'common-up':'common-down'" />
        </div>
      </div>
      <transition name="fade" mode="out-in">
        <div v-if="isShowing.commonLink" class="link-card-list">
          <LinkSimpleCard v-for="link in commonLinks" :key="link.id" :site="link"/>
        </div>
      </transition>
    </div>
    <div class="common-link-list">
      <div class="link-head">
        <h2>失效の博客 👀（{{ loseLinks.length }}）</h2>
        <div class="link-btn" @click="isShowing.loseLink=!isShowing.loseLink">
          {{ isShowing.loseLink ? '收起' : '展开' }}
          <SvgIcon :icon-class="isShowing.loseLink ? 'common-up':'common-down'" />
        </div>
      </div>
      <transition name="fade" mode="out-in">
        <div v-if="isShowing.loseLink">
          <div class="lose-info">
            <SvgIcon icon-class="common-info" class="icon"/>
            <p>近期无法访问或访问异常（例如证书到期）</p>
          </div>
          <div class="link-card-list">
            <LinkSimpleCard v-for="link in loseLinks" :key="link.id" :site="link"/>
          </div>
        </div>
      </transition>
    </div>
    <div class="notice">
      <div class="link-head">
        <h2>免责声明 🏆</h2>
        <div class="link-btn" @click="isShowing.disclaimer=!isShowing.disclaimer">
          {{ isShowing.disclaimer ? '收起' : '展开' }}
          <SvgIcon :icon-class="isShowing.disclaimer ? 'common-up':'common-down'" />
        </div>
      </div>
      <transition name="fade" mode="out-in">
        <div v-if="isShowing.disclaimer" class="notice-content">
          <h2>友情链接页免责声明</h2>
          <p>
            本博客遵守中华人民共和国相关法律。本页内容仅作为方便学习而产生的快速链接的链接方式，对与友情链接中存在的链接、好文推荐链接等均为其他网站。我本人能力有限无法逐个甄别每篇文章的每个字，并无法获知是否在收录后原作者是否对链接增加了违反法律甚至其他破坏用户计算机等行为。因为部分友链网站甚至没有做备案、域名并未做实名认证等，所以友链网站均可能存在风险，请你须知。
          </p>
          <p>
            所以在我力所能及的情况下，我会包括但不限于：
          </p>
          <ul>
            <li>针对收录的博客中的绝大多数内容通过标题来鉴别是否存在有风险的内容</li>
            <li>在收录的友链好文推荐中检查是否存在风险内容</li>
          </ul>
          <p>
            但是你在访问的时候，仍然无法避免，包括但不限于：
          </p>
          <ul>
            <li>作者更换了超链接的指向，替换成了其他内容</li>
            <li>作者的服务器被恶意攻击、劫持、被注入恶意内容</li>
            <li>作者的域名到期，被不法分子用作他用</li>
            <li>作者修改了文章内容，增加钓鱼网站、广告等无效信息</li>
            <li>不完善的隐私保护对用户的隐私造成了侵害、泄漏</li>
          </ul>
          <p>
            最新文章部分为机器抓取，本站作者未经过任何审核和筛选，本着友链信任原则添加的。如果你发现其中包含违反中华人民共和国法律的内容，请即使联系和举报。该友链会被拉黑。
          </p>
          <p>
            如果因为从本页跳转给你造成了损失，深表款意，并且建议用户如果发现存在问题在本页面进行回复。通常会很快处理。如果长时间无法得到处理，建议通过 <span class="text-primary" @click="copyEmail">邮箱</span> 联系博主。
          </p>
        </div>
      </transition>
    </div>
    <div class="notice">
      <div class="link-head">
        <h2>友情相关须知 🤟</h2>
        <div class="link-btn" @click="isShowing.friendship=!isShowing.friendship">
          {{ isShowing.friendship ? '收起' : '展开' }}
          <SvgIcon :icon-class="isShowing.friendship ? 'common-up':'common-down'" />
        </div>
      </div>
      <transition name="fade" mode="out-in">
        <div v-if="isShowing.friendship" class="notice-content">
          <h2>本站添加友链要求</h2>
          <p>
            请遵守以下几点，如下：
          </p>
          <ul>
            <li>能够正常访问</li>
            <li>含本站链接</li>
            <li>网站类型为<strong style="color: #eb5c88;">个人博客</strong></li>
          </ul>
          <p>
            请（<span class="fast-add-link" @click="applyLink">点击这里快速添加</span>）站点信息申请友情链接，申请后在我不忙的时候会统一添加，即使不通过也会给予邮件回复。
          </p>
          <h2>你提交的信息有可能被修改</h2>
          <p>
            如果有修改，我会将修改内容进行告知：
          </p>
          <ul>
            <li>为了友链相关页面和组件的统一性和美观性，可能会对你的昵称进行缩短处理，例如昵称包含博客、X的XX等内容或形式将被简化。</li>
            <li>为了降低博客运行成本，头像展示的图片均使用提供的链接，所以为了保证头像展示的可靠性，请提供可访问链接，若无法获取头像，如果有更改信息需求，请在本页的评论中添加。</li>
            <li>为了保证本站能够正确抓取文章，所有的友链链接要求为博客主页链接，而不是个人主页链接</li>
          </ul>
        </div>
      </transition>
    </div>
    <div class="notice">
      <div class="link-head">
        <h2>申请格式  🎉</h2>
        <div class="link-btn" @click="isShowing.applyLink=!isShowing.applyLink">
          {{ isShowing.applyLink ? '收起' : '展开' }}
          <SvgIcon :icon-class="isShowing.applyLink ? 'common-up':'common-down'" />
        </div>
      </div>
      <transition name="fade" mode="out-in">
        <div v-if="isShowing.applyLink" class="notice-content">
          <h2>我的博客信息</h2>
          <p>为了避免图床问题，建议您将头像存储到贵站图床，如下：</p>
          <ul>
            <li>博客名称/站长名称：阿斯达撒旦撒旦撒</li>
            <li>博客地址：https://www.moxiaoli.cn/#/home</li>
            <li>博客头像：https://xxxx.xxxxxxxxxxxx.xxxx/img/xxxx.png</li>
            <li>博客简介：云想衣裳花想容，春风拂槛露华浓。<br/>
              &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;  若非群玉山头见，会向瑶台月下逢。</li>
          </ul>
          <div class="apply-link-btn" @click="applyLink">友情链接自助申请</div>
        </div>
      </transition>
    </div>
    <Dialog v-model:visible="dialog.visible" :title="dialog.title" :show-border="false">
      <template #content>
        <div class="dialog-content">
          <div class="dialog-content-input">
            <span name="must">博客名称/站长名称</span>
            <MyInput placeholder="请输入" v-model:context="applyLinkParam.siteName" />
            <span name="must">博客地址</span>
            <MyInput placeholder="http//或https://" v-model:context="applyLinkParam.siteUrl"/>
            <span name="must">博客头像</span>
            <MyInput placeholder="https://" v-model:context="applyLinkParam.logoUrl" />
            <span>博客简介</span>
            <MyInput placeholder="最多50字内" v-model:context="applyLinkParam.remark" />
            <span name="must">邮箱（友链通过或拒绝可能会通过邮箱通知）</span>
            <MyInput placeholder="example@mail.com" v-model:context="applyLinkParam.email" />
            <MyInput placeholder="验证码" focus-color="#e6e8eb" input-type="code" v-model:context="applyLinkParam.code">
              <template #right-icon>
                <div class="code-btn" @click="sendMailCode(applyLinkParam.email)">
                  <div class="code-btn-line"></div>
                  获取验证码
                </div>
              </template>
            </MyInput>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <div class="dialog-footer-btn" @click="applyLinkBtn">
            提交
          </div>
        </div>
      </template>
    </Dialog>
    <BackToTop />
  </div>
</template>

<style scoped lang="less">
.link {
  display: flex;
  flex-direction: column;
  .link-card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: calc((100% - 4 * 305px) / 3);
  }
  .common-link-list{
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: calc((100% - 4 * 305px) / 3);
  }
  .notice {
    margin-top: 40px;
    .notice-content {
      width: 100%;
      padding: 40px;
      border-radius: 8px;
      border: 1px solid #E0E0E0;
      box-sizing: border-box;
      background: #FFFFFF;
      color: #333333;
      display: flex;
      flex-direction: column;
      gap: 24px;
      & > h2 {
        height: 30px;
        text-align: center;
        font-weight: 700;
        font-size: 20px;
        line-height: 29px;
        margin-bottom: 8px;
      }
      & > ul {
        list-style-type: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
        li{
          &::before {
            content: "●";
            color: #eb5c88;
            margin-right: 6px; /* 调整间距 */
          }
        }
      }
      & > p {
        font-weight: 400;
        font-size: 16px;
        line-height: 23px;
      }
    }
  }
}
.link-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  & > h2 {
    height: 38px;
    color: #333333;
    font-weight: 700;
    font-size: 24px;
    line-height: 35px;
  }
  .link-btn {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap; // 强制不换行
    color: #666666;
    cursor: pointer;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}
.text-primary  {
  background: #eb5c88;
  color: #fff;
  cursor: pointer;
  padding: 2px 12px;
  width: 56px;
  height: 28px;
  border-radius: 4px;
}
.fast-add-link{
  cursor: pointer;
  color: #eb5c88;
  text-decoration-line: underline;
}
.lose-info {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  width: 100%;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #efb7ca;
  box-sizing: border-box;
  background: #f1dde5;
  color: #eb5c88;
  margin-bottom: 24px;
  .icon{
    width: 16px;
    height: 16px;
  }
  & > p {
    height: 20px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
  }
}
.apply-link-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 480px;
  height: 40px;
  border-radius: 4px;
  background: #eb5c88;
  color: #ffffff;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

.dialog-footer{
  display: flex;
  justify-content: center;
  align-items: center;
  .dialog-footer-btn{
    width: 368px;
    height: 44px;
    border-radius: 8px;
    background: #eb5c88;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    &:hover{
      cursor: pointer;
    }
  }
}

.dialog-content{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  .dialog-content-input{
    display: flex;
    flex-direction: column;
    gap: 16px;
    & > span{
      height: 22px;
      font-size: 14px;
      color: #333333;
      font-weight: 400;
      line-height: 20px;
    }
    [name="must"] {
      &::before {
        content: "*";
        color: #eb5c88;
        margin-right: 6px; /* 调整间距 */
      }
    }
  }
}

.code-btn{
  font-size: 14px;
  line-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  .code-btn-line{
    width: 1px;
    height: 26px;
    border-left: 1px solid #e6e8eb;
    margin-right: 20px;
  }
  &:hover{
    color: #EB5C88;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.95);
  transform-origin: top;
}

.fade-enter-to,
.fade-leave-from {
  transform: scaleY(1);
}
</style>
